<template>
  <div class="charge">
    <ul>
      <li ref="tab1" @click.stop.passive="runToLink(107,'http://wap.10010.com/t/query/queryRealTimeFeeInfoNew.htm')"></li>
      <li ref="tab2" @click.stop.passive="runToLink(108,'http://upay.10010.com/npfwap/npfMobWap/bankcharge/index.html?version=wap&desmobile=6672070486447365')"></li>
      <li ref="tab3" @click.stop.passive="runToLink(109,'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf71dfa4539d2f215&redirect_uri=http%3A%2F%2Fwx1.unisk.cn%2FweixinLinksucaiController.do%3Flink%26id%3Dff8080815cf4472c015d07559ea02af7%26jwid%3Dgh_a1d4f56be7af&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect')"></li>
    </ul>
  </div>
</template>
<script>
import tongJi from '@/assets/lib/tongji.js'
export default {
  data() {
    return {
      key: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initAnimated();
    })
  },
  methods: {
    //跳转
    runToLink(id, url) {
      runToLink(id, url) {
        axios.get('http://wxjx.unisk.cn/ynlt/discount/buy/updateOpenNum', {
          params: {
            id: id
          }
        }).then(res => {
          res = res.data;
          location.href = url;
        })
      },
      initAnimated() {
        // tabs的动画
        Velocity(this.$refs.tab1,
          {
            left: '0rem',
            opacity: 1
          },
          {
            duration: '1500',
            easing: [250, 15],
            delay: false
          })
        // tab2
        Velocity(this.$refs.tab2,
          {
            right: '0rem',
            opacity: 1
          },
          {
            duration: '1500',
            easing: [250, 15],
            delay: 500
          })
        // tab3
        Velocity(this.$refs.tab3,
          {
            left: '0rem',
            opacity: 1
          },
          {
            duration: '1500',
            easing: [250, 15],
            delay: 1000
          })
      }
    },
  }
</script>
<style lang="less" scoped>
.charge {
  ul {
    overflow: hidden;
    li {
      margin: 15px auto;
      margin: 15px auto;
      position: relative;
      opacity: 0;
    }
    li:nth-child(1) {
      left: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/charge-btns.png") no-repeat 0 -10px;
      background-size: 640px 758px;
    }
    li:nth-child(2) {
      right: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/charge-btns.png") no-repeat 0 -2.65rem;
      background-size: 640px 758px;
    }
    li:nth-child(3) {
      left: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/charge-btns.png") no-repeat 0 -5.2rem;
      background-size: 640px 758px;
    }
  }
}
</style>
